<script setup>
import { ref } from "vue";

let props = defineProps({
  id: {
    type: String,
    default: "message",
  },
  rows: {
    type: Number,
    default: 4,
  },
  placeholder: {
    type: String,
    default: "",
  },
  labelClass: {
    type: String,
    default: "",
  },
  modelValue: String,
});
let emits = defineEmits(["update:modelValue"]);
const inputData = ref(props.modelValue);
const changeVal = (e) => {
  emits("update:modelValue", e.target.value);
};
</script>
<template>
  <div class="input-group">
    <label :for="id" :class="labelClass"><slot /></label>
    <textarea
      style="background: #fff"
      name="message"
      class="form-control"
      :id="id"
      :placeholder="placeholder"
      :rows="rows"
      v-model="inputData"
      @input="changeVal"
    />
  </div>
</template>
